<template>
  <div class="my-indicators" :class="{'col-lg-6': message.type, 'col-lg-12': !message.type}">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" v-for="item in message.items"
            :key="item.id" :class="{active: item.isActive}" :data-slide-to="item.id"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" :class="{'carousel-2-1': message.type, 'carousel-4-1': !message.type}" role="listbox">
        <a class="item" v-for="item in message.items" :key="item.id" :class="{active: item.isActive}" :href="item.href">
          <img :src="item.cover == null?defaultImg:item.cover" alt="...">
          <div class="carousel-caption">{{ item.title }}</div>
        </a>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <!--  -->
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Indicators',
  data () {
    return {
      defaultImg: require('../assets/img/slide1.png')
    }
  },
  props: ['message']
}
</script>

<style scoped>

</style>
